<template>
  <view class="evaluate-page">
    <view class="evaluate-total"
      >全部评价（{{ evaluateList.length || 0 }}）</view
    >
    <view class="evaluate-list">
      <view
        class="evaluate-item"
        v-for="(item, index) in evaluateList"
        :key="index"
      >
        <view class="evaluate-user">
          <view class="flex">
            <image class="avatar" :src="item.userAvatar" />
            <view class="user-info">
              <view class="nickname">
                <view>{{ item.userName }}</view>
                <image v-if="item.level == 1" src="/static/images/my/vip.png" />
                <image
                  v-if="item.level == 2"
                  src="/static/images/my/svip.png"
                />
              </view>
              <view class="evaluate-time">{{ item.reviewTime }}</view>
            </view>
          </view>
          <view>
            <u-rate
              :count="5"
              v-model="item.reviewScore"
              activeColor="#ff4254"
              readonly
            ></u-rate>
          </view>
        </view>
        <view class="evaluate">{{ item.reviewContent }}</view>
        <view class="pics" v-if="item.pics && item.pics.length > 0">
          <!-- 一张图片 -->
          <template v-if="item.pics.length == 1">
            <image
              v-for="(childItem, childIndex) in item.pics"
              :src="childItem"
              :key="childIndex"
              class="pics-item-2"
            />
          </template>
          <!-- 两张 或 四张 -->
          <template v-else-if="item.pics.length == 2 || item.pics.length == 4">
            <image
              v-for="(childItem, childIndex) in item.pics"
              :src="childItem"
              :key="childIndex"
              class="pics-item-2"
            />
          </template>
          <!-- 三张或其他  -->
          <template v-else>
            <image
              v-for="(childItem, childIndex) in item.pics"
              :src="childItem"
              :key="childIndex"
              class="pics-item-3"
            />
          </template>

          <view class="comment" v-if="item.merchantReplyContent"
            >客服：{{ item.merchantReplyContent }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import productApi from "@/api/product";
export default {
  name: "evaluateList",
  data() {
    return {
      goodId: null,
      evaluateList: [],
    };
  },
  onLoad(options) {
    this.goodId = options.id;
  },
  onShow() {
    this.getGoodReviews();
  },
  methods: {
    getGoodReviews() {
      let data = {
        goodId: this.goodId,
      };
      productApi.getGoodReviews(data).then((res) => {
        if (res.code == 200) {
          if (Array.isArray(res.rows) && res.rows.length != 0) {
            let arr = res.rows.map((item, index) => {
              return {
                ...item,
                pics: item.pics.split(","),
              };
            });
            this.evaluateList = arr.slice(0, 2);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
image {
  display: block;
}

.flex {
  display: flex;
  align-items: center;
}

.evaluate-page {
  width: 100vw;
  overflow: hidden;

  .evaluate-total {
    padding: 32rpx;
    margin: 0 0 32rpx;
    font-size: 34rpx;
    font-weight: 600;
    background: #fff;
  }

  .evaluate-list {
    padding: 32rpx;
    background: #fff;

    .evaluate-item {
      margin: 16rpx 0;
      border-bottom: 1rpx solid #dddddd;

      .evaluate-user {
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          margin: 0 8rpx 0 0;
          border-radius: 50%;
          background: #000;
        }

        .user-info {
          .nickname {
            display: flex;
            align-items: center;

            view {
              margin: 0 6rpx 0 0;
              font-weight: 600;
              font-size: 30rpx;
            }

            image {
              width: 86rpx;
              height: 47rpx;
            }
          }

          .evaluate-time {
            line-height: 50rpx;
          }
        }
      }

      .evaluate {
        padding: 10rpx 0;
      }

      .pics {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 10rpx;

        image {
          width: 226rpx;
          height: 226rpx;
        }

        .pics-item-2 {
          width: 339rpx;
          height: 339rpx;
          margin: 0 14rpx 14rpx 0;
        }

        .pics-item-2:nth-child(2n) {
          margin-right: 0;
        }

        .pics-item-3 {
          margin: 0 14rpx 14rpx 0;
        }

        .pics-item-3:nth-child(3n) {
          margin-right: 0;
        }
      }
    }

    .evaluate-item:last-child {
      border-bottom: none;
    }
  }
}
</style>
